import cx from 'classnames';
import dayjs from 'dayjs';
import * as React from 'react';
import DatePicker from '../../../../DatePicker';
import { prefix } from '../../../../config';
import { getPrefixCls } from '../../../../utils';
import type { EditableCell } from './type';

export interface EditableInputProps extends EditableCell {
  format?: string;
  value: string;
}
const cellPrefixCls = getPrefixCls(prefix.editableTable, 'cell');
const defaultFormat = 'YYYY-MM-DD';
export default function EditableInput(props: EditableInputProps) {
  const {
    align,
    columnId,
    value,
    curModalParams,
    onChange,
    onBlur,
    onClick,
    onDoubleClick,
    onMouseEnter,
    onMouseLeave,
    ...restProps
  } = props;
  const format = props.format || defaultFormat;
  const v = value ? dayjs(value, format) : null;
  return (
    <DatePicker
      format={format}
      {...restProps}
      className={cx(align, `${cellPrefixCls}__component`)}
      bordered={false}
      value={v}
      onChange={(_, date) => {
        onChange(date);
        onBlur(date);
      }}
      onClick={
        onClick && onClick.bind(this, { id: columnId, params: curModalParams })
      }
      onMouseEnter={
        onMouseEnter &&
        onMouseLeave.bind(this, { id: columnId, params: curModalParams })
      }
      onMouseLeave={
        onMouseLeave &&
        onClick.bind(this, { id: columnId, params: curModalParams })
      }
    />
  );
}
